
<div class="container" ng-controller="cctvImgCtrl">



    <div class="panel panel-default" style="margin-top: 100px">
        <div class="panel-body">

            <!-- 查询 -->
            <div class="form-inline">
                <div class="form-inline">
                    <div class="form-group">
                        <label for="keyword">关键字:</label>
                        <input type="text" id="keyword" class="form-control input-sm" ng-model="keyword">
                    </div>

                    <div class="form-group">
                        <label for="start_datetime">开始时间:</label>
                        <input id='start_datetime' class="form-control input-sm"
                               data-date-format="yyyy-mm-dd hh:ii:ss" type="text"/>
                    </div>
                    <div class="form-group">
                        <label for="end_datetime">结束时间:</label>
                        <input id='end_datetime' class="form-control input-sm"
                               data-date-format="yyyy-mm-dd hh:ii:ss" type="text"/>
                    </div>
                    <div class="form-group">
                        <label for="shipName">选择船舶:</label>
                        <select id='shipName' class="form-control" ng-model="selectedShip"
                                ng-options="item.mmsi as item.name for item in shipData">
                        </select>
                    </div>
                    <button type="button" class="btn btn-sm btn-primary" ng-click="queryByCondition()">
                        查询
                    </button>
                </div>
            </div>

            <hr/>

            <!-- 表格 -->
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th>船名</th>
                        <th>时间</th>
                        <th>图片（点击查看大图）</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="item in redata | filter:keyword">
                        <td>{{formatShipName(item.mmsi)}}</td>
                        <td>{{item.timeStamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td ng-click="detailModal(item)" data-toggle="modal" data-target="#detailModal">
                            <img src="http://192.168.1.108:19797/checkIn/cctv/image?name={{item.imageName}}" width="50px" height="50px">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel-footer">
                <div style="width: auto;display: table;margin-left: auto;margin-right: auto;">
                    <button class="btn btn-primary" ng-hide="redata.length >= totalElements && redata.length != 0"
                            ng-click="queryMore()">
                        查看更多
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 详情弹出框 -->
    <div id='detailModal' class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <!--<h4 class="modal-title">Modal title</h4>-->
                </div>
                <div class="modal-body">
                    <img src={{modalContent}} width="100%" height="100%"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


</div>
